<template>
  <div>
    <div>
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0">
            <span>用户管理</span>
            <el-button v-show="activeName === 'two'" type="success" class="addBtn" @click="addCpipoFun" v-if="userRole.MG_401005"><i class="el-icon-plus"></i>发布账号</el-button>
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          
        </el-col>
      </el-row>
     
      <el-row>
        <el-col :span="20" :offset="4" v-show="activeName !== 'two'" style="position:absolute;text-align:right;z-index:2">
          <span style="padding-right:20px">共：{{countTotal}} 用户</span>
         <el-select  v-model="area" clearable placeholder="选择省份" style="width:130px" @change="changeCity">
            <el-option v-for="item in oders" :key="item.value" :label="item.areaname" :value="item.id"></el-option>
        </el-select>
         <el-select  v-model="obj.city"  clearable placeholder="请选择城市" style="width:130px">
            <el-option v-for="item in citys" :key="item.value" :label="item.areaname" :value="item.id"></el-option>
        </el-select>
          <el-input v-model="obj.keyword" clearable style="width:200px" placeholder="手机号／昵称"></el-input>
          <el-button  type="primary"  @click="sheachFun">搜索</el-button>
          <span v-if="activeName === 'three'">
            <el-button   type="success"  @click="handeAll(true)">开启</el-button>
            <el-button   type="danger"  @click="handeAll(false)">禁用</el-button>
          </span>

        </el-col>
      
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部账号" name="one">
        </el-tab-pane>
        <el-tab-pane label="发布账号" name="two">
        </el-tab-pane>
        <el-tab-pane label="爬虫账号" name="three">
        </el-tab-pane>
      </el-tabs>
          <Uelist ref="chifun" v-if="activeName === 'one'" @setTotal="setTotal"></Uelist>
     
          <Ue-Clist ref="ClistName" v-if="activeName === 'two'"></Ue-Clist>
          <OtherUser ref="OtherUser" v-if="activeName === 'three'" @setTotal="setTotal"></OtherUser>
   
    </div>
  
   
   <AddCuser v-if="dialogPipo" ref="adduser" :dialogPipo="dialogPipo" @showFun ="closePipo"></AddCuser>
   
  </div>
</template>

<script>
  import AddCuser from './content/AddCuser'
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  import Uelist from './content/Uelist'
  import UeClist from './content/UeClist'
  import OtherUser from './content/OtherUser'
  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        adduserSta:false,
        dialogPipo:false,
        showCuser:false,
        countTotal:0,
        area:'',
        obj:{
          city:'',
          seachType:0,
          keyword:''
        },
        oders:[],
        citys:[],
        options:[
          {value:0,label:'全部'},
          {value:1,label:'牙齿矫正' },
          {value:2, label:'口腔健康' },
          {value:3,label:'儿童口腔'},
          {value:4,label:'种植牙'}
        ],
        activeName: 'one',
       
      }
    },
    components:{
      AddCuser,
      Uelist,
      UeClist,
      OtherUser
    },
    // mounted() {
    //   var obj = document.getElementById('centerbox');
    //   obj.addEventListener('scroll', this.handleScroll,true)
    // },
    // destroyed(){
      
    //   var obj = document.getElementById('centerbox')
    //   obj.removeEventListener('scroll', this.handleScroll,true)
    // },
    created() {
      Http.countUserNumer()
      .then( res => {
        this.countTotal = res.data.data.total
      })
      .catch( error => {
        
      })
      Http.getAreaList(0)
        .then( res => {
          this.oders = res.data.data;
        })
    },
    methods: {
      handleClick(tab, event) {
        
      },
      // handleScroll() {
      //   var scollobj = document.getElementById('centerbox');
      //   var scrollTop = scollobj.scrollTop;
      //   const obj = document.getElementById('tab-first');
      //   const myobj = obj.parentNode.parentNode;
      //   if(scrollTop> 32){
      //     myobj.style.position = 'fixed';
      //     myobj.style.top = 0;
      //   } else {
      //     myobj.style.position = 'relative';
      //   }
        
      // },
       //获取地址部分
      changeCity(val,city=''){
        this.okLng = 0;
        Http.getAreaList(val)
          .then( res => {
            this.obj.city = '';
            this.citys = res.data.data;
            
          })
      },
      addCpipoFun() {
        this.dialogPipo = true;
        this.adduserSta = true;
      },
      closePipo() {
        this.dialogPipo = false;
        this.adduserSta = false;
        this.$refs.ClistName.getCuser()
      },

       //搜索
      sheachFun(){
        const params = JSON.parse(JSON.stringify(this.obj));
        params.city ? '' : params.city = this.area;
        this.activeName === 'one' ? 
        this.$refs.chifun.searchFun(params)
        : this.$refs.OtherUser.searchFun(params);
      },
      handeAll(bool) {
        const txt = bool ? '开启所有' : '隐藏所有';
        this.$confirm(`确定${txt}账号吗？`,'提示',{
          confirmVuttonText:'确定',
          confirmButtonText:'确定'
        }).then( ()=> {
          bool? this.sendOpen() : this.sendDis()
          
        })
      },
      sendDis() {
        Http.disableAll().then(res=>{
          this.$refs.OtherUser.getlist()
        })
      },
      sendOpen() {
        Http.openAll().then(res=>{
          this.$refs.OtherUser.getlist()
        })
      },
      setTotal(total){
        this.countTotal = total;
        console.log('执行啊',total)
      }
    }
  }
</script>
<style scoped>
.box{
  border-bottom:1px solid red;
}
.test{
    border:1px solid #ccc;
}
.drag-item{
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: auto;
    position: relative;
    
    background: #ddd;
    margin:20px 5px;
}
.ghostClass{
    opacity: 1;
}
.bottom{
    width: 200px;
    height: 50px;
    position: relative;
    background: blue;
    top:2px;
    left: 2px;
    transition: all .5s linear;
}
.el-tabs__nav-wrap::after{
  width:0;
}
/* /deep/.el-input__inner, /deep/.el-input__icon{
  height: 30px !important;
  line-height: 30px !important;
} */
.btns{
  position: relative;
  top: -2px
}
</style>
